"use client"

import { useState } from "react"
import { View, Text, StyleSheet, TouchableOpacity, Modal, FlatList, Platform } from "react-native"
import { ChevronDown } from "lucide-react-native"
import { theme } from "../../constants/theme"

interface SelectOption {
    label: string
    value: string
}

interface SelectProps {
    value: string
    onValueChange: (value: string) => void
    options: SelectOption[]
    placeholder?: string
}

export function Select({ value, onValueChange, options, placeholder = "请选择" }: SelectProps) {
    const [isOpen, setIsOpen] = useState(false)

    const selectedOption = options.find((option) => option.value === value)

    const handleSelect = (value: string) => {
        onValueChange(value)
        setIsOpen(false)
    }

    return (
        <>
            <TouchableOpacity style={styles.selectButton} onPress={() => setIsOpen(true)} activeOpacity={0.7}>
                <Text style={styles.selectButtonText}>{selectedOption ? selectedOption.label : placeholder}</Text>
                <ChevronDown size={20} color={theme.colors.neutral.gray} />
            </TouchableOpacity>

            <Modal visible={isOpen} transparent animationType="fade" onRequestClose={() => setIsOpen(false)}>
                <View style={styles.modalOverlay}>
                    <TouchableOpacity style={styles.modalBackdrop} onPress={() => setIsOpen(false)} activeOpacity={1} />

                    <View style={styles.modalContent}>
                        <View style={styles.modalHeader}>
                            <View style={styles.modalHandle} />
                        </View>

                        <FlatList
                            data={options}
                            keyExtractor={(item) => item.value}
                            renderItem={({ item }) => (
                                <TouchableOpacity
                                    style={[styles.option, item.value === value && styles.optionSelected]}
                                    onPress={() => handleSelect(item.value)}
                                >
                                    <Text style={[styles.optionText, item.value === value && styles.optionTextSelected]}>
                                        {item.label}
                                    </Text>
                                </TouchableOpacity>
                            )}
                            style={styles.optionsList}
                        />
                    </View>
                </View>
            </Modal>
        </>
    )
}

const styles = StyleSheet.create({
    selectButton: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
        borderWidth: 1,
        borderColor: theme.colors.neutral.lightGray,
    },
    selectButtonText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.black,
    },
    modalOverlay: {
        flex: 1,
        justifyContent: "flex-end",
    },
    modalBackdrop: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    modalContent: {
        backgroundColor: theme.colors.neutral.white,
        borderTopLeftRadius: theme.borderRadius.extraLarge,
        borderTopRightRadius: theme.borderRadius.extraLarge,
        paddingBottom: Platform.OS === "ios" ? 34 : 24,
        maxHeight: "70%",
    },
    modalHeader: {
        alignItems: "center",
        paddingVertical: theme.spacing.md,
    },
    modalHandle: {
        width: 36,
        height: 4,
        backgroundColor: theme.colors.neutral.lightGray,
        borderRadius: 2,
    },
    optionsList: {
        paddingHorizontal: theme.spacing.lg,
    },
    option: {
        paddingVertical: theme.spacing.lg,
        paddingHorizontal: theme.spacing.md,
        borderRadius: theme.borderRadius.medium,
        marginBottom: theme.spacing.xs,
    },
    optionSelected: {
        backgroundColor: `${theme.colors.primary.default}15`,
    },
    optionText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
    },
    optionTextSelected: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
})

